<template>
    <el-card style="margin-bottom: 20px;">
        <el-form :inline="true">
            <el-form-item label="一级分类">
                <el-select v-model="CategoryStore.category1Id" placeholder="请选择" style="width: 180px;"
                    @change="changeCategory1" :disabled="screen == 1">
                    <el-option v-for="item in CategoryStore.category1" :key="item.id" :label="item.name"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select v-model="CategoryStore.category2Id" placeholder="请选择" style="width: 180px"
                    @change="changeCategory2" :disabled="screen == 1">
                    <el-option v-for="item in CategoryStore.category2List" :key="item.id" :label="item.name"
                        :value="item.id" />
                </el-select>

            </el-form-item>
            <el-form-item label="三级分类">
                <el-select v-model="CategoryStore.category3Id" placeholder="请选择" style="width: 180px"
                    :disabled="screen == 1">
                    <el-option v-for="item in CategoryStore.category3List" :key="item.id" :label="item.name"
                        :value="item.id" />
                </el-select>

            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import useCategoryStore from '@/stores/category'
const CategoryStore = useCategoryStore()
defineProps(['screen'])
onMounted(() => {
    CategoryStore.getCategory1()

})
const changeCategory1 = async () => {
    CategoryStore.getCategory2()
    CategoryStore.category2Id = ''
    CategoryStore.category3List = []
    CategoryStore.category3Id = ''
}
const changeCategory2 = () => {
    CategoryStore.getCategory3()
    CategoryStore.category3Id = ''
}
</script>

<style lang="scss" scoped></style>